<style type="text/css">
    #hr-draft-add {
        padding: 20px 25px 25px 0;
    }

    .layui-form-item.cc1{
        margin-top: 12px;
        margin-bottom: -20px;
    }
    .cc{
        margin-top: 12px;
        margin-bottom: -15px;
    }
    .cc1 a{
        font-size: 14px;
        padding-right: 20px;

    }

    .inputWith div{
        width: 80px;
    }
</style>
<!-- 注意id属性每个页面id必须独立-->
<div class="layui-fluid" id="hr-draft-add">
    <!--注意lay-filter属性，该属性为form表单唯一属性-->
    <form class="layui-form" action="" lay-filter="hr-draft-add-form">
        <!-- layui-form-item为自适应长度样式 -->
        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item-require">名称</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <input type="text" name="trainningTitle" minlength="2" maxlength="30" lay-verify="required|range"
                       autocomplete="off" class="layui-input repetitive" id="hr-draft-add-name">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">级别</label>
            <div class="layui-input-block">
                <select name="trainningLevel" id="hr-draft-trainning-level-select" lay-verify="required" lay-search>
                    <option value="">请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类别</label>
            <div class="layui-input-block">
                <select name="trainningType" id="hr-draft-trainning-type-select" lay-verify="required" lay-search>
                    <option value="">请选择</option>
                </select>
            </div>
        </div>
        <!--        <div class="layui-form-item">-->
        <!--            <label class="layui-form-label">部门：</label>-->
        <!--            <div class="layui-input-block" id="user-update-dept"></div>-->
        <!--        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">部门：</label>
            <div class="layui-input-block" id="hr-draft-dept-select"></div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">讲师姓名</label>
            <div class="layui-input-block">
                <select name="teacherInfo" id="hr-draft-teacher-select" lay-verify="required" lay-search>
                    <option value="">请选择</option>
                    <option value="刘伟">刘伟</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">参训人员</label>
            <div class="layui-input-block">
                <textarea name="participantsTitle"  class="layui-textarea"></textarea>
            </div>
            <div class="layui-form-item cc1">
                <div class="layui-input-block">
                    <a herf="#">新增</a>
                    <a herf="#">修改</a>
                </div>
            </div>
        </div>


        <div class="layui-form-item cc">
            <label class="layui-form-label">考核方式</label>
            <div class="layui-input-block">
                <input type="checkbox" name="chechStyleExamine" title="在线考试"  value="1" />
                <input type="checkbox" name="checkStyleExperience" title="现场体会"  value="1" />
                <input type="checkbox" name="checkStyleCommunacation" title="分享交流"  value="1" />
                <input type="checkbox" name="checkStyleOperation" title="现场实操"  value="1" />
            </div>
        </div>

        <div class="layui-form-item cc">
            <label class="layui-form-label">培训方式</label>
            <div class="layui-input-block">
                <input type="radio" name="innerOrOutter" value="15000" title="内训" checked>
                <input type="radio" name="innerOrOutter" value="15001" title="外训">
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label">计划时间(月)</label>
            <div class="layui-input-block inputWith">
                <input type="checkbox" name="planDateAdd" title="1" lay-skin="primary" checked value="2022/01/01" />
                <input type="checkbox" name="planDateAdd" title="2" lay-skin="primary" value="2022/02/01" />
                <input type="checkbox" name="planDateAdd" title="3" lay-skin="primary" value="2022/03/01"/>
                <input type="checkbox" name="planDateAdd" title="4" lay-skin="primary" value="2022/04/01"/>
                <input type="checkbox" name="planDateAdd" title="5" lay-skin="primary" value="2022/05/01" />
                <input type="checkbox" name="planDateAdd" title="6" lay-skin="primary" value="2022/06/01" /><br/>
                <input type="checkbox" name="planDateAdd" title="7" lay-skin="primary" value="2022/07/01"/>
                <input type="checkbox" name="planDateAdd" title="8" lay-skin="primary" value="2022/08/01"/>
                <input type="checkbox" name="planDateAdd" title="9" lay-skin="primary"  value="2022/09/01" />
                <input type="checkbox" name="planDateAdd" title="10" lay-skin="primary" value="2022/10/01" />
                <input type="checkbox" name="planDateAdd" title="11" lay-skin="primary" value="2022/11/01"/>
                <input type="checkbox" name="planDateAdd" title="12" lay-skin="primary" value="2022/12/01"/>
            </div>
            <!--            <div class="layui-input-block">-->

            <!--            </div>-->
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">简介</label>
            <div class="layui-input-block">
                <!-- 简介、备注框使用textarea 样式使用layui-textarea-->
                <textarea name="remark" maxlength="200" class="layui-textarea"></textarea>
            </div>
        </div>
        <!-- 此页面为弹出页面，此处将本页面的提交按钮和重置按钮隐藏，使用febs-hide样式-->
        <div class="layui-form-item febs-hide">
            <!--lay-filter为按钮点击过滤器  注意id配置，为在父页面点击所获取的id-->
            <button class="layui-btn" lay-submit="" lay-filter="hr-draft-add-submit"
                    id="hr-draft-add-submit-btn"></button>
            <button type="reset" class="layui-btn" id="hr-draft-add-reset-btn"></button>
        </div>
    </form>
</div>

<script data-th-inline="none" type="text/javascript">
    layui.use(['febs', 'form', 'validate','upload','xmSelect',"tree"], function () {
        let $ = layui.$,
            febs = layui.febs,
            tree = layui.tree,
            layer = layui.layer,
            xmSelect = layui.xmSelect,
            // 表单
            form = layui.form,
            // 验证
            validate = layui.validate;


        // 进行表单验证
        form.verify(validate);
        // 渲染表单
        form.render();


        //点击提交后获取 部门下拉菜单的值

        form.on('submit(hr-draft-add-submit)', function (data) {

            var value = $("#hr-draft-dept-select").val();
            console.log(value+"909090909090909090");

            //获取选取时间的值
            var arr =new Array();
            $("input:checkbox[name='planDateAdd']:checked").each(function(i){
                arr[i] = $(this).val();
            });
            data.field.planDateAdd=arr.join(",");
            // data.field为当前form表单的josn数据
            febs.post(ctx + 'draftPlan/add', data.field, function () {
                // 关闭所有弹出窗体
                layer.closeAll();
                // 弹出成功消息
                febs.alert.success('新增计划草稿成功');
                // 点击父页面查询按钮
                $('#hr-draft').find('#hr-draft-query-btn').click();
            });
            return false;
        });


        febs.get('/HRDictionary/list?hrdictionaryType=TRAINNING_LEVEL', null, function (data) {
            let list = data.data;
            console.log(list);
            for (let i = 0; i < list.length; i++) {
                $('#hr-draft-trainning-level-select').append(new Option(list[i].detail, list[i].id));
            }
            //重新渲染下拉菜单
            form.render('select');
        });
        <!--获取培训类别 -->
        febs.get('/HRDictionary/list?hrdictionaryType=TRAINNING_TYPE', null, function (data) {
            let list = data.data;
            console.log(list);
            for (let i = 0; i < list.length; i++) {
                $('#hr-draft-trainning-type-select').append(new Option(list[i].detail, list[i].id));
            }
            //重新渲染下拉菜单
            form.render('select');
        });

        febs.get('/OutsideTeacherController/findList', null, function (data) {
            let list = data.data;
            for (let i = 0; i < list.length; i++) {
                $('#hr-draft-teacher-select').append(new Option(list[i].realName, list[i].realName));
            }
            //重新渲染下拉菜单
            form.render('select');
        });

        dataPermissionXmlSelect = xmSelect.render({
            el: '#hr-draft-dept-select',
            model: {label: {type: 'text'}},
            clickClose: false,
            search: true,
            highlightCurrent:true,
            checkStrictly: false,
            tree: {
                show: true,
                // strict: false,
                showLine: false,
                clickCheck: true,
                expandedKeys: [-1],
            },
            name: 'organizationDeptNameList',
            theme: {
                color: '#52c41a',
            },
            prop: {
                value: 'id'
            },
            height: 'auto'
        });

        febs.get(ctx + 'hrDeptController/select/tree', null, function (data) {
            dataPermissionXmlSelect.update(data)
        });



    });
</script>